<template>
    <div class="page-container page-customerManage">
        <div class="company-manager">
            <div class="operations">
                <div class="search-user">
                    <el-input v-model="companyName" class="search-input" placeholder="企业名称"
                        style="width: 200px;"></el-input>
                    <el-input v-model="appId" class="search-input" placeholder="小程序appId" style="width: 200px;"></el-input>
                    <el-input v-model="appName" class="search-input" placeholder="小程序名称" style="width: 200px;"></el-input>
                    <div class="search-btn" @click="handleSubmit">查询</div>
                </div>
            </div>
            <el-table :data="companyList" border tooltip-effect="dark" style="width: 100%;"
                @selection-change="handleSelectionChange">
                <el-table-column label="公司ID" align="center" width="70">
                    <template slot-scope="scope">
                        <div>{{ scope.row.companyId }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="accountId" align="center" label="配置ID" width="70">
                </el-table-column>
                <el-table-column prop="companyName" align="center" label="企业名称" min-width="220">
                </el-table-column>
                <el-table-column prop="userId" align="center" width="110" label="BOSS用户ID">
                </el-table-column>
                <el-table-column prop="cardId" align="center" width="110" label="BOSS名片ID">
                </el-table-column>
                <el-table-column prop="phone" align="center" width="110" label="管理员电话">
                </el-table-column>
                <el-table-column label="公司口令" align="pwd" min-width="100">
                    <template slot-scope="scope">
                        <div>{{ scope.row.pwd }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="accountType" align="center" label="配置端" width="100">
                    <template slot-scope="scope">
                        <!--                        1,用户端小程序账号，2:crm小程序账号，3：pc端小程序账号，4：支付账号 5,微信公众号-->
                        <div>{{ scope.row.accountType == 1 ? '名片端' : scope.row.accountType == 2 ? 'crm' :
                            scope.row.accountType == 3 ? 'CRM-PC网站应用' : scope.row.accountType == 4 ? '名片支付' :
                                scope.row.accountType == 5 ? '微信公众号' : scope.row.accountType == 6 ? 'CRM支付' : '' }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="appName" align="center" width="150" label="小程序名称">
                </el-table-column>
                <el-table-column prop="appId" align="center" width="170" label="AppID">
                </el-table-column>
                <el-table-column prop="appSecret" align="center" width="280" label="AppSecret">
                </el-table-column>
                <el-table-column prop="companyKey" align="center" label="companyKey" width="110">
                </el-table-column>
                <el-table-column label="商户号" align="center" width="100">
                    <template slot-scope="scope">
                        <div>{{ scope.row.merchantId }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="auditState" align="center" width="80" label="审核状态">
                    <template slot-scope="scope">
                        <div>{{ scope.row.auditState == 1 ? '审核通过' : cope.row.auditState == 0 ? '待审核' : '拒绝' }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="授权状态" align="center" width="80">
                    <template slot-scope="scope">
                        <div>{{ scope.row.state == 1 ? '成功' : '失败' }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="企业类型" align="center" width="80">
                    <template slot-scope="scope">
                        <div v-if="scope.row.isAgent == 1" style="color: #FF5C6C;">代理商</div>
                        <div v-else>
                            单企业
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" align="center" width="140">
                    <template slot-scope="scope">
                        <div>{{ scope.row.createTime | formatDateMin }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" fixed="right" width="180">
                    <template slot-scope="scope">
                        <div style="text-align: center;">
                            <el-button class="checkCard" @click="updateCompany(scope.row)" type="text"
                                size="medium">修改</el-button>
                            <el-button class="checkCard" @click="seeCard(scope.row)" type="text"
                                size="medium">查看</el-button>
                            <el-button class="checkCard" @click="seeOem(scope.row)" type="text"
                                size="medium">OEM配置</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!--oem修改-->
        <el-dialog title="修改OEM公司信息" :visible.sync="dialogVisible" class="customer-manage-dialog">
            <el-form :model="company" label-width="120px" inline label-position="left">
                <el-form-item label="当前企业">
                    <div>{{ company.companyName }}</div>
                </el-form-item>
                <br>
                <el-form-item label="BOOS用户ID">
                    <el-input class="w240" v-model="company.userId" auto-complete="off"></el-input>
                </el-form-item>
                <br>
                <el-form-item label="管理员手机号">
                    <div>{{ company.phone }}</div>
                </el-form-item>
                <br>
                <el-form-item label="公司口令">
                    <el-input class="w240" v-model="company.pwd" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="小程序名称">
                    <el-input class="w240" v-model="company.appName" auto-complete="off"></el-input>
                </el-form-item>
                <br>
                <el-form-item label="appId">
                    <el-input class="w240" v-model="company.appId" auto-complete="off"></el-input>
                </el-form-item>
                <br>
                <el-form-item label="appSecret" v-if="company.accountType != 6 && company.accountType != 4">
                    <el-input class="w240" v-model="company.appSecret" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="商户ID" v-if="company.accountType == 6 || company.accountType == 4">
                    <el-input class="w240" v-model="company.merchantId" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="商户秘钥" v-if="company.accountType == 6 || company.accountType == 4">
                    <el-input class="w240" v-model="company.key" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="支付p12证书" v-if="company.accountType == 6 || company.accountType == 4">
                    <el-upload :action="uploadUrl" class="upload-demo" :before-upload="beforeUpload" :limit="1">
                        <el-button size="small" type="primary">上传</el-button>
                    </el-upload>
                </el-form-item>
                <br>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align: center;">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </div>
        </el-dialog>
        <!--查看名片-->
        <el-dialog title="查看手机号对应的名片ID" :visible.sync="dialogPhoneVisible" class="customer-manage-dialog">
            <el-form :model="company" label-width="120px" inline label-position="left">
                <el-form-item label="手机号">
                    <el-input style="width: 170px;" v-model="company.phone" auto-complete="off"></el-input>
                    <el-button type="primary" @click="queryPhone">查询</el-button>
                </el-form-item>
                <br>
                <el-form-item label="名片Id">
                    <el-input class="w240" v-model="company.cardId" auto-complete="off"></el-input>
                </el-form-item>
                <br>
                <el-form-item label="用户Id">
                    <el-input class="w240" v-model="company.userId" auto-complete="off"></el-input>
                </el-form-item>
                <br>
                <el-form-item label="公司Id">
                    <el-input class="w240" v-model="company.companyId" auto-complete="off"></el-input>
                </el-form-item>
                <br>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align: center;">
                <el-button @click="dialogPhoneVisible = false">关闭</el-button>
            </div>
        </el-dialog>
        <!--oem配置-->
        <el-dialog title="oem配置" :visible.sync="dialogOemVisible" class="customer-manage-dialog-oem">
            <el-form :model="company" label-width="120px" inline label-position="left">
                <el-form-item label="系统名称">
                    <el-input style="width: 680px;" v-model="company.oemName" placeholder="如：智能CRM"></el-input>
                </el-form-item>
                <br>
                <el-form-item label="oem域名">
                    <el-input style="width: 680px;" v-model="company.oemDomain" placeholder="如：crm.yourdomain.com"></el-input>
                </el-form-item>
                <br>
                <el-form-item label="公司logo">
                    <el-input style="width: 680px;" v-model="company.oemLogo" placeholder="尺寸：30*30"></el-input>
                    <el-upload class="avatar-uploader" :action="uploadUrl" :show-file-list="false"
                        :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="company.oemLogo" :src="company.oemLogo" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <br>
                <el-form-item label="网站icon">
                    <el-input style="width: 680px;" v-model="company.iconLogo" placeholder="尺寸：128*128"></el-input>
                    <el-upload class="avatar-uploader" :action="uploadUrl" :show-file-list="false"
                        :on-success="handleAvatarSuccessIcon" :before-upload="beforeAvatarUploadIcon">
                        <img v-if="company.iconLogo" :src="company.iconLogo" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <br>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align: center;">
                <el-button @click="dialogOemVisible = false">关闭</el-button>
                <el-button type="primary" @click="confirmOem">确 定</el-button>
            </div>
        </el-dialog>
        <div class="page">
            <el-pagination @current-change="handleCurrentChange" :current-page.sync="pageNum" :page-sizes="[10]"
                :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import { queryOemCompany, updateOemCompany, queryCardByPhone, queryOemConfigCompanyId, saveOemConfig, updateOemConfig } from '@/api/api.js';
import { serverUrl } from "@/utils/server.js";
export default {
    data() {
        return {
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7;
                }
            },
            total: 0,
            pageNum: 1,
            multipleSelection: [],
            companyName: '',
            companyList: [],
            appId: '',
            appName: "",
            dialogVisible: false,
            dialogPhoneVisible: false,
            dialogOemVisible: false,
            imageUrl: "",
            uploadUrl: "",
            company: {
                companyName: '',
                companyId: '',
                pwd: '',
                password: '',
                phone: '',
                appSecret: '',
                cardId: "",
                appId: '',
                isAgent: '',
                companyType: '',
                userId: '',
                //oem
                configId: '',
                oemDomain: '',
                oemName: '',
                oemLogo: '',
                iconLogo: ''
            }
        };
    },
    created() {
        this.queryOemCompany(1);
        this.uploadUrl = serverUrl.uploadUrl;
    },
    methods: {
        handleAvatarSuccessIcon(res, file) {
            console.log(res, file);
            this.$set(this.company, 'iconLogo', serverUrl.imgUrl + res.data)
        },
        beforeAvatarUploadIcon(file) {
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isLt2M;
        },
        handleAvatarSuccess(res, file) {
            console.log(res, file)
            this.$set(this.company, 'oemLogo', serverUrl.imgUrl + res.data)
            console.log(this.company)
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        seeCard(row) {
            this.dialogPhoneVisible = true
        },
        seeOem(row) {
            this.company = row;
            queryOemConfigCompanyId(row).then(res => {
                if (res.code == 200 && res.data) {
                    this.company = res.data;
                } else if (res.code != 200) {
                    this.$message({
                        message: res.message,
                        type: 'warning'
                    });
                }
                this.dialogOemVisible = true;
            }).catch(err => {
                this.$message({
                    message: err,
                    type: 'warning'
                });
            })
        },
        queryPhone() {
            let params = {
                phone: this.company.phone
            }
            queryCardByPhone(params).then(res => {
                if (res.code == 200 && res.data) {
                    this.company = res.data;
                    console.log(res)
                } else if (res.code != 200) {
                    this.$message({
                        message: res.message,
                        type: 'warning'
                    });
                }
            }).catch(err => {
                this.$message({
                    message: err,
                    type: 'warning'
                });
            })
        },
        //修改OEM公司信息
        confirm() {
            console.log(this.company)
            updateOemCompany(this.company).then(res => {
                if (res.code == 200) {
                    this.$message({
                        message: '修改成功',
                        type: 'info'
                    });
                } else {
                    this.$message({
                        message: res.message,
                        type: 'warning'
                    });
                }
            }).catch(err => {
            })
        },
        //修改OEM配置
        confirmOem() {
            console.log(this.company)
            if (this.company.configId) {
                updateOemConfig(this.company).then(res => {
                    if (res.code == 200) {
                        this.$message({
                            message: '修改成功',
                            type: 'info'
                        });
                    } else {
                        this.$message({
                            message: res.message,
                            type: 'warning'
                        });
                    }
                }).catch(err => {
                })
            } else {
                saveOemConfig(this.company).then(res => {
                    if (res.code == 200) {
                        this.$message({
                            message: '保存成功',
                            type: 'info'
                        });
                    } else {
                        this.$message({
                            message: res.message,
                            type: 'warning'
                        });
                    }
                }).catch(err => {
                })
            }
            this.dialogOemVisible = false;
        },
        queryOemCompany(page) {
            let params = {
                pageNum: page,
                companyName: this.companyName,
                appId: this.appId,
                appName: this.appName
            }
            queryOemCompany(params).then(res => {
                if (res.code == 200) {
                    this.total = res.data.pageInfo.total;
                    this.companyList = res.data.pageInfo.list;
                } else {
                    this.companyList = [];
                    this.$message({
                        message: res.message,
                        type: 'warning'
                    });
                }
            }).catch(err => {
                this.companyList = [];
            })
        },
        updateCompany(row) {
            this.dialogVisible = true;
            this.company = row;
        },
        handleCurrentChange() {
            this.queryOemCompany(this.pageNum)
        },
        handleSubmit() {
            this.queryOemCompany(1)
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        beforeUpload(file) {
            console.log(file)
            const that = this;
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function (e) {
                let base64Data = e.target.result;
                base64Data = base64Data.substring(base64Data.indexOf(',') + 1);
                that.company.certData = base64Data;
                console.log(that.company.certData);
            };
        },
    }
}
</script>
<style lang="scss">
.page-customerManage {
    background: #fff;
    min-height: calc(100vh - 150px);
    position: relative;
    .page {
        padding: 10px 0;
        text-align: center;
    }
    .company-manager {
        padding: 0 20px;
        .operations {
            display: flex;
            justify-content: space-between;
            height: 60px;
            align-items: center;
            .operation-btns {
                display: flex;
                div {
                    border-radius: 4px;
                    background: #51CDCB;
                    font-size: 14px;
                    line-height: 40px;
                    height: 40px;
                    color: #fff;
                    padding: 0 20px;
                    margin-right: 10px;
                    cursor: pointer;
                }
                .disabled {
                    background: #B9EBEA;
                }
            }
            .search-user {
                display: flex;
                .search-input {
                    height: 40px;
                    margin-right: 10px;
                    .el-input__inner {
                        height: 40px;
                    }
                }
                .search-btn {
                    border-radius: 4px;
                    background: #51CDCB;
                    font-size: 14px;
                    line-height: 40px;
                    height: 40px;
                    color: #fff;
                    padding: 0 20px;
                    cursor: pointer;
                }
                .disabled {
                    background: #B9EBEA;
                }
            }
        }
    }
    .customer-manage-dialog {
        .el-dialog {
            width: 450px;
            .el-dialog__header {
                text-align: center;
            }
            .el-form-item {
                margin-bottom: 10px;
            }
            .w240 {
                width: 240px;
            }
        }
    }
    .customer-manage-dialog-oem {
        .el-dialog {
            width: 850px;
            .el-dialog__header {
                text-align: center;
            }
            .el-form-item {
                margin-bottom: 10px;
            }
            .w240 {
                width: 240px;
            }
        }
    }
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 78px;
    height: 78px;
    line-height: 78px;
    text-align: center;
}
.avatar {
    width: 78px;
    height: 78px;
    display: block;
}
</style>
